<template>
    <div class="customerAccount">
      <div class="customerAccount-header">
        <van-button   style="width:100%;background: #F7F7F7;border-radius: 0!important;font-weight: bold;" @click="keHuShow=true">客户筛选<i class="iconfont icon-xia"></i></van-button>

      </div>

      <div class="customerAccount-content">

        <van-list
          v-model="loading"
          :finished="finished"
          :offset="offset"
          @load="getCustomerAccountList"
        >
          <!--AccountList-->
          <div v-if="typeof customerAccountList=='string'" style="color:#ddd;padding:20px 0;">{{customerAccountList}}</div>
          <grid v-else :cols="clos" v-for="(val,index) in customerAccountList" :key="index"  style="color:#666;background: #fff!important;padding:5px 0;" @click.native="customerAccountInfo(val.customer_name,val.customer_id,val.id,val.created_at,val.updated_at)">
            <grid-item class="cac-list" >

              <van-row>
                    <van-col span="23">
                        <van-row class="ca-content">
                          <van-col span="24" >
                            姓名: {{val.customer_name}}
                          </van-col>
                            <van-col span="16" style="padding-top:5px;">
                              <div style="word-wrap:break-word">
                                账户: {{val.account_name}}
                              </div>

                            </van-col>
                          <van-col span="8" style="padding-top:5px;" :style="{color:color}">
                            ￥{{val.account_balance}}
                          </van-col>
                        </van-row>
                    </van-col>

                    <van-col span="1" style="line-height: 30px;">
                      <i class="iconfont icon-icon_arrow_right" style="font-size:12px;"></i>
                    </van-col>

              </van-row>
            </grid-item>
          </grid>
          <div class="noDatas" :style="{display:block}">
            数据已加载完
          </div>
        </van-list>


      </div>

      <!--客户弹层 AccountListPrev-->
      <van-popup v-model="keHuShow" @click-overlay="result=resultPrev" style="width:320px;height:426px;padding:10px 0;background: #fff!important;border-radius: 5px;">

        <div style="overflow: scroll;height:88%;margin-bottom:10px;border-bottom:1px solid #ddd;">
          <div v-if="AccountList.length==0" style="color:#ddd;padding:10px 0;">暂无客户</div>
          <van-checkbox-group v-else v-model="result" >
            <van-cell-group>
              <van-cell v-for="(items,idx) in AccountList" :title="backNameFn(items.customer_name)" :key="idx" style="text-align:left;font-size:12px;" clickable >
                <van-checkbox :name="items.customer_id" ref="checkboxes" />
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
        </div>
        <!--按钮-->
        <van-row >
          <van-col span="8" style="padding:0 10px;">
            <van-button  style="width:100%;height:38px;line-height: 38px;" @click="result=[]">重置</van-button>
          </van-col>
          <van-col span="8" style="padding:0 10px;">
            <van-button  style="width:100%;height:38px;line-height: 38px;" @click="closeKH">取消</van-button>
          </van-col>
          <van-col span="8" style="padding:0 10px;">
            <van-button  type="primary"  style="width:100%;height:38px;line-height: 38px;" @click="onSearch">确定</van-button>
          </van-col>
        </van-row>
      </van-popup>

      <!--返回按钮-->
      <backs></backs>


      <van-row class="customerAccount-footer" >
        <van-col span="24" ><span style="color:#44BB00">{{total}}</span>条</van-col>
      </van-row>

    </div>
</template>

<script>
  import { Grid, GridItem } from 'vux';
  import backs from "@/components/menu/backPrev";
    export default {
        name: "customerAccount",
        components:{
          Grid,
          GridItem,
          backs
        },
        data(){
          return {
            color:'#0D90EB',//主题色，字体色
            value:"",
            block:"none",
            currentPage:1,//当前页
            pageSize:20,//每页显示20条
            pageAll:0,//总页数
            total:0,
            customerAccountList:[],


            clos:1,
            loading: false,
            finished: false,
            offset:20,

            //弹层
            keHuShow:false,
            AccountList:[],

            result:[],
            resultPrev:[]//记录值
          }
        },
      methods:{
        backNameFn(names){
          if(names==""){
            return names="暂无用户名";
          }else{
            return names;
          }

        },
        // 客户弹层的确定按钮
        onSearch(){
          this.keHuShow=false;
          this.resultPrev=this.result;
          this.block = 'none'
          this.customerAccountList=[];
          this.currentPage=1;
          this.loading=true;
          this.finished=false;
          this.getCustomerAccountList();
        },
        // 弹层取消
        closeKH(){
          this.keHuShow=false;
          this.result =[];
          this.result = this.resultPrev;
        },
        //只为获取账户列表
        getCustomerAccountList(){
          var $this=this;
          this.$http.capital.get('/customerAccount',{
            params:{
              customerIdArr:$this.result,
              pageSize:$this.pageSize,
              curPage:$this.currentPage
            }
          })
            .then(function (response) {

              $this.currentPage+=1;//获取当前的下一页

              // console.log(response.data);
              if(response.data.code!=0){
                $this.customerAccountList="暂无数据";
                $this.loading = false;
                $this.finished = true;
                return;
              }

              // console.log(response.data.data);
              for (let i = 0; i < response.data.data.obj.length; i++) {
                if(i!=0){
                  if(response.data.data.obj[i].customer_id==response.data.data.obj[i-1].customer_id){
                    response.data.data.obj[i].customer_name=response.data.data.obj[i-1].customer_name;
                  }
                }
                //以千计num.toFixed(2);
                if(response.data.data.obj[i].account_balance>10000){
                  response.data.data.obj[i].account_balance=(response.data.data.obj[i].account_balance/10000).toFixed(2)+"万";

                }

                $this.customerAccountList.push(response.data.data.obj[i]);
              }
              $this.loading = false;
                  // console.log($this.customerAccountList);


              if ($this.customerAccountList.length >= response.data.data.count) {
                $this.finished = true;
                if (response.data.data.obj.length){
                  $this.block = 'block'
                }
              }
              $this.total=response.data.data.count;


            })
            .catch(function (error) {
              $this.$toast.fail('登陆过期，请重新登陆');
              console.log(error);
            });
        },
        //获取所有的账户名（在弹层中循环）
        getCustomerAccountNames(){
          var $this=this;
          this.$http.capital.get('/customerAccount',{
            params:{
              customerIdArr:[],
              pageSize:"",
              curPage:1
            }
          })
            .then(function (response) {
              var empId = localStorage.getItem('empId')
              if(empId&&response.data.code == 900001){
                $this.$toast.fail(response.data.message);
                $this.$router.go(-1)
                return;
              }
              // console.log(response.data);
              if(response.data.code!=0){
                $this.AccountList=[];
                return;
              }


              // console.log(response.data.data);
              $this.AccountList.push(response.data.data.obj[0]);
              for (let i = 0; i < response.data.data.obj.length; i++) {
                if(i!=0){
                  if(response.data.data.obj[i].customer_id==response.data.data.obj[i-1].customer_id){
                    response.data.data.obj[i].customer_name=response.data.data.obj[i-1].customer_name;
                  }else{
                    $this.AccountList.push(response.data.data.obj[i]);
                  }
                }

              }



            })
            .catch(function (error) {
              console.log(error);
            });
        },
        //跳转到账户详情
        customerAccountInfo(name,customerId,accountId,sDate,eDate){
          this.$router.push({name: 'customerAccountInfo',params:{
              url:"customerAccountInfo",
              name:name,
              customer_id:customerId,
              account_id:accountId,
              sdate:sDate,
              edate:eDate
            }});
        }
      },
      mounted(){
          this.getCustomerAccountNames();
      }
    }
</script>

<style scoped>
  .customerAccount{
    font-size:12px;
    color:#666;
  }

  .customerAccount .van-cell{
    border-bottom:1px solid #e5e5e5;
  }
  .customerAccount .van-cell:first-child{
    /*border-top:1px solid #e5e5e5;*/
  }
  .customerAccount [class*=van-hairline]::after{
    border:0;
  }

  .customerAccount-header{
    width:100%;
    position: fixed;
    top:0;
    left:0;
    background: #fff;
    z-index: 999;
  }
  .customerAccount-content{
    margin-top:45px;
    margin-bottom:30px;
    font-size:14px!important;
  }
  a{
    color:#666 !important;
  }
  .customerAccount-content .van-cell{
    text-align: left;
  }
  .customerAccount-content .van-cell__value{
    text-align:right;
  }
  .customerAccount-footer{
    position: fixed;
    bottom:0;
    left:0;
    border-top:1px solid #ddd;
    width:100%;
    font-size:12px;
    height:30px;
    line-height: 30px;
    background: #fff;
  }
  .van-search{
    padding: 6px 10px!important;
  }
  .van-search .van-search__action{
    margin-left:10px;

  }
  .customerAccount .van-hairline--top-bottom::after {
    border-width:0;
    border-bottom:1px solid #ddd;
  }

  .van-cell__title{
    text-align:left!important;
  }
   .van-cell__value--alone{
    color:red;
    text-align:right!important;
  }

  .customerAccount-back .weui-grid{
    text-align: left;
  }
  .weui-grid:before{
     border-right:0;
  }
  .weui-grids:after{
     border-left: 0;
  }
  .weui-grid:after{
    border-bottom:0;
  }
  .weui-grids{
    border-bottom: 1px solid #D9D9D9;
  }
  .weui-grids:before{
    border-top:0;
  }

  .ca-content{
    font-size:14px;
    color:#000;
  }
  .noDatas{
    font-size:12px;
    font-weight: bold;
  }
  .cac-list{
    text-align: left;padding:5px 10px;
  }
</style>
